<template>
  <div class="dashboard-container">
    <h1>商品数据可视化分析</h1>
    
    <div class="chart-row">
      <div class="chart-container">
        <CategoryBarChart />
      </div>
      <div class="chart-container">
        <ProductRoseChart />
      </div>
    </div>
    
    <div class="chart-row">
      <div class="chart-container">
        <SalesPieChart />
      </div>
      <div class="chart-container">
        <StockLineChart />
      </div>
    </div>
  </div>
</template>

<script setup>
import CategoryBarChart from '@/components/Echarts/CategoryBarChart.vue'
import ProductRoseChart from '@/components/Echarts/ProductRoseChart.vue'
import SalesPieChart from '@/components/Echarts/SalesPieChart.vue'
import StockLineChart from '@/components/Echarts/StockLineChart.vue'
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.chart-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.chart-container {
  width: 48%;
  height: 400px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
}
</style>